﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MapHuBei.aspx.cs" Inherits="Map_MapHuBei" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <style type="text/css">  
         html{height:100%}   body{height:100%;margin:0px;padding:0px}   #container{height:100%}   
    </style>
    
    <link href="CSS/MapPop.css" rel="stylesheet" type="text/css" />
    <script src="../Resources/Scripts/jQuery/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <script src="MaskLayer.js" type="text/javascript"></script>
    <%--<script type="text/javascript" src="markerclusterer.js"></script>--%>

    
    <script type="text/javascript">

        $(function () {
            //湖北省所辖市及其经纬度坐标
            
            $.post("MapHelper.ashx", { "action": "getOnlineTotal", "cityName": "咸宁市" }, function (data, status) {

                if (status = "success") {
                    //arr[0] = data.split("|")[0];
                    //arr[1] = data.split("|")[1];
                    //alert(arr[0]);
                    //for (var i = 0; i < json.length; i++) {
                        //arr[i] = i + 100;
                    //}
                }
            });


            createMap(); //初始化地图，将用到的变量先初始化一下 map1后边会用到
            // createMapPro("湖北省");

            $.post("MapHelper.ashx", { "action": "GetCityName" }, function (data, status) {
                if (data == "err") {
                    alert("加载错误");
                }
                else {
                    var pcc = $.parseJSON(data);

                    var pccName = pcc[0].Name;
                    var pccValue = pcc[0].OrganID;
                    pccName = pccName.replace("|-", "");
                    pccName = pccName.replace("|-", "");
                    if (pccValue.length == 2) {
                        //省级用户权限直接加载各个城市
                        createMapPro(pccName);
                    }
                    if (pccValue.length == 4) {
                        //市级用户权限 加载该市所辖县
                        createCountyMarkers(pccName);
                    }
                    if (pccValue.length == 6) {
                        //县级用户权限，直接加载该县的终端设备
                        createCountyTerminal(pccName);
                    }
                }

            });


            //点击终端 发送信息
            $("#send").click(function () {
                var equipNo = $("#equipNo").val();
                var phone = $("#phoneHidden").val();
                var msg = $("#sendMsg").val();
                var sendTimes = $("#sendTimes").val();
                var tMsg = sendTimes + msg;
                if (msg == "" || msg.length < 3) {
                    alert("发送内容不能为空或太短");
                    return;
                }
                $.post("MapHelper.ashx", { "action": "sendMsg", "phone": phone, "sendMsg": tMsg, "equipNo": equipNo }, function (data, status) {
                    if (status == "success") {
                        if (data == "ok") {
                            alert("信息已经发出！");
                        }
                    }
                });
            });


        });
       
        //定义两个全局变量 bool类型的，用来表示用户是否是从市级权限或 县级权限登录
        var flagCity = false;
        var flagCounty = false;
        function createMap() {
            var map1 = new BMap.Map("container");
            window.map1 = map1;
            map1.centerAndZoom(new BMap.Point(112.197616, 31.062324), 8);
            map1.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_SMALL }));
            map1.enableScrollWheelZoom();
           
        }

        //=====================================湖北地图处理
        //创建地图函数开始 处理省比较特殊（暂时没有找到处理这个bug的方法）
        
        function createMapPro(name) {
//           var map1 = new BMap.Map("container");
//            window.map1 = map1;
//            map1.centerAndZoom(new BMap.Point(112.197616, 31.062324), 8);
//            map1.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_SMALL }));
//            map1.enableScrollWheelZoom();
            flagCity = true;//标示符，用来标示 是不是从省级权限登录
            getBoundary(name);
            createCityMarker();
            
        }

        //因为有点小bug 对创建省的边界做特殊处理 开始
        //==湖北省边界
        function getBoundary(name) {
            var bdary = new BMap.Boundary();
            //var name = "湖北省";通过参数的形式传入名称
            bdary.get(name, function (rs) {       //获取行政区域
                //map1.clearOverlays();        //清除地图覆盖物       
                var count = rs.boundaries.length; //行政区域的点有多少个
                for (var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 3, strokeColor: "#0033FF" }); //建立多边形覆盖物
                    ply.setFillColor();
                    map1.addOverlay(ply);  //添加覆盖物
                    //map1.setViewport(ply.getPath());    //调整视野         
                }
            });
           
        }
        //创建湖北城市标注
        function createCityMarker() {
            for (var i = 0; i < json.length; i++) {
                var name = json[i].name;
                var lng = json[i].local.split(',');
                var point = new BMap.Point(lng[0],lng[1]);
                addCityMarker(point,i);
            }
        
        }
        //添加湖北城市标注

        function addCityMarker(point, index) {
            var cityName = json[index].name;
            if (cityName == "襄阳市") {
                cityName = "襄樊市";
            }
            var img = "images/redgoyellow.png";
            var myIcon = new BMap.Icon(img, new BMap.Size(20, 31),
                                {
                                    anchor: new BMap.Size(10, 31), //标注的偏移，让标注点的下端指向经纬度坐标
                                    infoWindowAnchor: new BMap.Size(10, 0) //信息框的偏移  让信息框的下断点指向标注的上端
                                }
             );
            var marker = new BMap.Marker(point, { icon: myIcon });
            map1.addOverlay(marker);
           
            
            //给标注添加鼠标滑过事件
            marker.addEventListener("mouseover", function () {
                //alert(mapDataArray[0]);

                //                //=========================================
                var total = 0;
                var online = 0;
                $.post("MapHelper.ashx", { "action": "getOnlineTotal", "cityName": cityName }, function (data, status) {

                    if (status = "success") {
                        $("#total").val(data.split("|")[0]);
                        $("#onlineTotal").val(data.split("|")[1]); //data.split("|")[1]
                        
                    }

                });

                var infoWindow = new BMap.InfoWindow();
                var detailInfow = '<div>城市名称：' + cityName + '<br/>终端数量：' + $("#total").val() + '<br/>在线数量：' + $("#onlineTotal").val() + '</div>';
                infoWindow.setContent(detailInfow);
                this.openInfoWindow(infoWindow, map1.getCenter());

            });

            //点击城市标注进入该市所辖县
            marker.addEventListener("click", function () {
                map1.clearOverlays(); //首先清除原来的覆盖物   以便能添加新的覆盖物
                getBoundary(cityName);
                //放大地图
                map1.centerAndZoom(point, 10);
                createCountyMarkers(cityName);
            });
        }

        //创建湖北省各个城市对应的县的标注
        function createCountyMarkers(cityName) {
           
           //需要处理，如果用户直接使用市的权限登录的话就要做些处理
            if (flagCity != true) { //用户直接用市级权限登录
                map1.clearOverlays();
                for (var i = 0; i < json.length; i++) {
                    if (json[i].name == cityName) {
                        var lngcity = json[i].local.split(',');
                        var pointCity = new BMap.Point(lngcity[0], lngcity[1]);
                        map1.centerAndZoom(pointCity, 10);
                        break;
                    }
                }
                getBoundary(cityName);
            }
            
            var arrCounty = jsonCounty[cityName];

            for (var i = 0; i < arrCounty.length; i++) {
                var countyName = arrCounty[i].CName;
                var lng = arrCounty[i].lng;
                var lat = arrCounty[i].lat;
                var point = new BMap.Point(lng, lat);
                addCountyMarkers(point, i, countyName,cityName);
            }
        }
        //添加各个城市对应的县的标注 湖北省的
        function addCountyMarkers(point,index,countyName,cityName) {
            var img = "images/redgoyellow.png";
            var myIcon = new BMap.Icon(img, new BMap.Size(20, 31),
                                {
                                    anchor: new BMap.Size(10, 31), //标注的偏移，让标注点的下端指向经纬度坐标
                                    infoWindowAnchor: new BMap.Size(10, 0) //信息框的偏移  让信息框的下断点指向标注的上端
                                }
             );
            var marker = new BMap.Marker(point, { icon: myIcon });
            map1.addOverlay(marker);

            //给标注添加鼠标滑过事件
            marker.addEventListener("mouseover", function () {
                //alert(mapDataArray[0]);

                var total = 0;
                var online = 0;
                $.post("MapHelper.ashx", { "action": "getOnlineTotal", "cityName": cityName, "countyName": countyName }, function (data, status) {

                    if (status = "success") {
                        
                        $("#total").val(data.split("|")[0]);
                        $("#onlineTotal").val(data.split("|")[1]); //data.split("|")[1]
                    }

                });
                var infoWindow = new BMap.InfoWindow();
                var detailInfow = '<div>城市名称：' + countyName + '<br/>终端数量：' + $("#total").val() + '<br/>在线数量：' + $("#onlineTotal").val() + '</div>';
                infoWindow.setContent(detailInfow);
                this.openInfoWindow(infoWindow, map1.getCenter());
            });

            //点击县的标注进入该县
            marker.addEventListener("click", function () {
                map1.clearOverlays(); //首先清除原来的覆盖物   以便能添加新的覆盖物
                getBoundary(countyName);
                //放大地图
                map1.centerAndZoom(point, 11);
                createCountyTerminal(countyName);
                flagCounty = true;//=====标示符，用来表示用户是否是通过十级权限进入县的界面
            });

        }

        //开始给湖北的各个县添加终端
        function createCountyTerminal(countyName) {
//            getBoundary(countyName);
//            var pointCounty = new BMap.Point("113.823514", "29.251179");
//            map1.centerAndZoom(pointCounty, 11);
            if (flagCounty != true) {

                map1.clearOverlays();
                for (var key in jsonCounty) {
                    for (var i = 0; i < jsonCounty[key].length; i++) {
                        var county = jsonCounty[key];
                        if (county[i].CName == countyName) {                   
                            var pointCounty = new BMap.Point(county[i].lng, county[i].lat);
                            map1.centerAndZoom(pointCounty, 12);
                            getBoundary(countyName);
                            break;
                        } 
                    }
                }
            }
           
            $.post("MapHelper.ashx", { "action": "GetMapData", "name": countyName, "value": "000000" }, function (data, status) {
                if (status == "success") {
                    if (data != "err") {
                        var terminal = $.parseJSON(data);
                        window.terminal = terminal;
                        for (var i = 0; i < terminal.length; i++) {
                            var lng = terminal[i].Lng;
                            var lat = terminal[i].Lat;
                            //var vName = terminal[i].Village;
                            var point = new BMap.Point(lng, lat);
                            addMarkerTerminal(point, i);
                        }
                        //alert(terminal[0].Lng+"--"+terminal[0].Lat);
                    }
                    else {
                        //alert("没有该权限下的数据");
                    }
                }
                else {
                    alert("数据加载失败");
                }
            });
        }
        //创建地图函数开始 处理市 县
//        function createMap(num, name) {
//            var map = new BMap.Map("container");
//            window.map = map;
//            map.centerAndZoom(new BMap.Point(113.837612, 34.028415), num);
//            map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_SMALL }));
//            map.enableScrollWheelZoom();
//            getBoundaryCity(name);
//        }

        //处理市和县的边界 开始
//        function getBoundaryCity(name) {
//            var bdary = new BMap.Boundary();

//            bdary.get(name, function (rs) {       //获取行政区域
//                map.clearOverlays();        //清除地图覆盖物       
//                var count = rs.boundaries.length; //行政区域的点有多少个
//                for (var i = 0; i < count; i++) {
//                    var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
//                    ply.setFillColor();
//                    map.addOverlay(ply);  //添加覆盖物
//                    map.setViewport(ply.getPath());    //调整视野         
//                }
//            });
//        }

        //获取一个县的所有终端数据 CCName：城市（县)名称   value：名称对应的值
//        function loadDataTerminalOfCounty(CCName, value) {

//            $.post("MapHelper.ashx", { "action": "GetMapData", "name": CCName, "value": value }, function (data, status) {
//                if (status == "success") {
//                    if (data != "err") {
//                        var terminal = $.parseJSON(data);
//                        window.terminal = terminal;
//                        for (var i = 0; i < terminal.length; i++) {
//                            var lng = terminal[i].Lng;
//                            var lat = terminal[i].Lat;
//                            //var vName = terminal[i].Village;
//                            var point = new BMap.Point(lng, lat);
//                            addMarkerTerminal(point, i);
//                        }
//                        //alert(terminal[0].Lng+"--"+terminal[0].Lat);
//                    }
//                    else {
//                        alert("没有该权限下的数据");
//                    }
//                }
//                else {
//                    alert("数据加载失败");
//                }
//            });

//        }


        var markers = []; //设置一个全局的变量数据存放终端

        //添加终端的标注和事件
        function addMarkerTerminal(point, index) {
            var img = "";
            if (terminal[index].Online == "1") {
                img = "images/green.png";
            } else if (terminal[index].Online == "0") {
                img = "images/red.png";
            }
            // alert(img);
            var myIcon = new BMap.Icon(img, new BMap.Size(20, 31),
                                {
                                    anchor: new BMap.Size(10, 31), //标注的偏移，让标注点的下端指向经纬度坐标
                                    infoWindowAnchor: new BMap.Size(10, 0) //信息框的偏移  让信息框的下断点指向标注的上端
                                }
             );
            var marker = new BMap.Marker(point, { icon: myIcon });
            map1.addOverlay(marker);

            //给标注添加鼠标滑过事件
            marker.addEventListener("mouseover", function () {
                //alert(mapDataArray[0]);
                var infoWindow = new BMap.InfoWindow();
                var detailInfow = '<div>所在地：' + terminal[index].Village + '<br/>终端号码：' + terminal[index].SimNo + '</div>';
                infoWindow.setContent(detailInfow);
                this.openInfoWindow(infoWindow, map1.getCenter());
            });

            marker.addEventListener("click", function () {
                // 弹出遮罩层的信息发送框
                var eNo = terminal[index].ENo;
                $("#equipNo").val(eNo);
                var phone = terminal[index].SimNo;
                $("#phoneHidden").val(phone);
                var villageName = terminal[index].Village;
                $("#villageName").val(villageName);
                ShowDiv('MyDiv', 'fade');
            });
            markers.push(marker);
        }

        //在可视区域内加载标注
        function addMymarkers() {

            for (i = 0; i < markers.length; i++) {
                var result = BMapLib.GeoUtils.isPointInRect(markers[i].getPosition(), map1.getBounds());
                if (result == true) {
                    map1.addOverlay(markers[i]);
                } else {
                    map1.removeOverlay(markers[i]);
                }
            }

        }
        //湖北城市名称及对应坐标
        var json = [{ "name": "襄阳市", "local": "112.117685,32.074376" },
                        { "name": "孝感市", "local": "113.917763,30.939499" },
                        { "name": "十堰市", "local": "110.783881,32.659916" },
                        { "name": "咸宁市", "local": "114.313305,29.867034" },
                        { "name": "黄石市", "local": "115.0308,30.219186" },
                        { "name": "随州市", "local": "113.375043,31.709436" },
                        { "name": "恩施州", "local": "109.48903,30.290036" },
                        { "name": "神农架林区", "local": "110.673497,31.768386" }];
       //对应城市所辖县区
        var jsonCounty = { "襄樊市": [{ "CName": "古城县", "lng": "111.659521", "lat": "32.269123"}],
            "孝感市": [{ "CName": "云梦县", "lng": "113.759645", "lat": "31.027633"}],
            "十堰市": [{ "CName": "郧西县", "lng": "110.432147", "lat": "32.999388" },
                       { "CName": "竹溪县", "lng": "109.721672", "lat": "32.324394" }],
            "咸宁市": [{ "CName": "崇阳县", "lng": "114.046088", "lat": "29.562872" },
                       { "CName": "通城县", "lng": "113.823514", "lat": "29.251179" },
                       { "CName": "通山县", "lng": " 114.488908", "lat": "29.612949" }],
            "黄石市": [{"CName": "大冶市", "lng": "114.98599", "lat": "30.101896"}],      
            "随州市": [{"CName": "广水市", "lng": "113.83231", "lat": "31.622693"}],
            "恩施州": [{"CName": "来凤县", "lng": "109.264393", "lat": "29.437239"},
                       {"CName": "巴东县", "lng": "110.344598", "lat": "31.053931"}],  
            "神农架林区": [{"CName": "神农架林区", "lng": "110.673497", "lat": "31.768386"}]
            
        }
        function mytest(name) {
            alert(jsonCounty[name][0].CName);
        }
    </script>
</head>
<body  >
    <div  >
       <%-- <select id="select">
            <option value="0">--请选择--</option>
            
        </select>--%>
        <%=ZASession.Account %>
    </div>
    <div id="container"></div> 
        <%--弹出遮罩层和发送信息框 开始--%>
 <div id="fade" class="black_overlay">
 </div>
<div id="MyDiv" class="white_content" >
  <%--      <div style="text-align: right; cursor: default; height: 40px;">
           <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
        </div>--%>
         <table width="448" border="0" cellspacing="0" cellpadding="0" align="center" class="bg" >
            <tr>
                <td height="40" class="tpt">
                    <img src="images/tpt.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="25" align="center">
                    <img src="images/tline.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    村名：<input name="村名" id="villageName" type="text" class="bor" style="width: 335px;" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    发送内容：<span style="font-size: 12px; color: #FF0000">（字数不超过350个)</span><br />
                    <textarea  id="sendMsg" name="textarea" rows="" cols="" class="bor2" ></textarea>
                   
                </td>
            </tr>
            <tr> 
                <td class="nr">
                    发送次数：<input id="sendTimes" name="sendTimes" type="text" size="3" value="3" class="bor" />次
                </td>
            </tr>
            <tr>
                <td height="60" align="center">
                    <img src="images/tqx.gif" alt="" onclick="CloseDiv('MyDiv','fade')" />&nbsp;&nbsp;&nbsp;&nbsp;<img id="send" src="images/tfs.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="20">
                </td>
            </tr>
        </table>
       <input type="hidden" id="phoneHidden" /><input type="hidden" id="equipNo" />
        
 </div>
 <%--弹出遮罩层和发送信息框 结束--%>
    <input id="total" type="hidden" value="0" />
    <input id="onlineTotal" type="hidden" value="0" />
</body>
</html>